<template>
<div>
	<h2 class="intro-title">Button 按钮</h2>
	<p class="intro-content">常用的操作按钮。</p>
	<h3 class="base-title">基础用法</h3>
	<p class="base-content">基础的按钮用法。</p>
	<div class="demo-block" :class="{'show-case-core':caseObj1.showCoreFlag}">
		<div class="demo-block-source">
			<bh-button type='default'>默认按钮</bh-button>
			<bh-button type='primary'>主要按钮</bh-button>
			<bh-button type='success'>成功按钮</bh-button>
			<bh-button type='info'>信息按钮</bh-button>
			<bh-button type='warning'>警告按钮</bh-button>
			<bh-button type='danger'>危险按钮</bh-button>
		</div>
		<div class="demo-block-core">
			<textarea class="demo-core-box" readonly="readonly">
				<bh-button type='default'>默认按钮</bh-button>
			</textarea>
			<textarea class="demo-core-box" readonly="readonly">
				<bh-button type='primary'>主要按钮</bh-button>
			</textarea>
			<textarea class="demo-core-box" readonly="readonly">
				<bh-button type='success'>成功按钮</bh-button>
			</textarea>
			<textarea class="demo-core-box" readonly="readonly">
				<bh-button type='info'>信息按钮</bh-button>
			</textarea>
			<textarea class="demo-core-box" readonly="readonly">
				<bh-button type='warning'>警告按钮</bh-button>
			</textarea>
			<textarea class="demo-core-box" readonly="readonly">
				<bh-button type='danger'>危险按钮</bh-button>
			</textarea>
		</div>
		<div class="demo-block-footer">
			<div class="demo-ms-arr" @click='toggleDemoCore(caseObj1)'>
				<span class="demo-ms-s">显示代码</span>
				<span class="demo-ms-h">隐藏代码</span>
			</div>
			<a :href="caseObj1.coreUrl" target="_blank" class="demo-online" title="前往 codepen.io 运行此示例">在线运行</a>
		</div>
	</div>
	<h3 class="base-title">Attributes</h3>
	<table class="attri-table">
		<thead>
			<tr>
				<th>参数</th>
				<th>说明</th>
				<th>类型</th>
				<th>可选值</th>
				<th>默认值</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>type</td>
				<td>类型</td>
				<td>string</td>
				<td>primary / success / info / warning / danger</td>
				<td>—</td>
			</tr>
		</tbody>
	</table>
</div>
</template>

<script>
export default {
	name: 'buttonDemo',
	props: {
		msg: String
	},
	data () {
		return {
			caseObj1: {
				showCoreFlag: false,
				coreUrl: 'https://codepen.io/xiebaolin/pen/eYEBRqm',
			},
		};
	},
	methods: {
		// 切换代码显隐
		toggleDemoCore (item) {
			item.showCoreFlag = !item.showCoreFlag;
		}
	},
}
</script>
